/**

<template>
<div>
  <div class="gps-operater">
    <h3>我是升级版的巡航器。。。</h3>
    <el-radio-group v-model="gpsTrackType" @change="radioChange">
      <el-radio-button label="startAnimation">开始播放</el-radio-button>
      <el-radio-button label="pauseAnimation">暂停播放</el-radio-button>
      <el-radio-button label="resumeAnimation">继续播放</el-radio-button>
      <el-radio-button label="stopAnimation">停止播放</el-radio-button>
    </el-radio-group>
  </div>
  <div id="mapLoca"></div>
</div>
</template>

<script>
  let BIGROUTES = {}
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    data() {
      return {
        gpsTrackType: '',
        animationSpeed: 200,
         trackGpsList:  [],
      }
    },
    created() {
     
    },
    mounted() {
       fetch('https://a.amap.com/amap-ui/static/data/big-routes.json')
      .then(res => res.json())
      .then(res =>  {
        // 北京到福州路线
        BIGROUTES = res[5]
        console.log('我是大轨迹数据********', BIGROUTES, this.trackGpsList)
        this.trackGpsList = BIGROUTES.path || []
        // 数据量太大 电脑要反抗了 没办法 只能取前1000个点
        this.trackGpsList.splice(1000)
        this.initMapData()
      })
    },
    destroyed() {
      this.mapRoadIns && this.mapRoadIns.destroy()
    },
    methods: {
      initMapData() {
        // 引入时注意版本号
        AMapLoader.load({
            "key": process.env.VUE_APP_MAP_KEY,  // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            "AMapUI": {             // 是否加载 AMapUI，缺省不加载
                "version": '1.1',   // AMapUI 缺省 1.1
                "plugins":['overlay/SimpleMarker'],       // 需要加载的 AMapUI ui插件
            },
            "Loca":{                // 是否加载 Loca， 缺省不加载
                "version": '2.0.0'  // Loca 版本，缺省 1.3.2
            },
        }).then(()=>{
            this.mapRoadIns = new AMap.Map('mapLoca', {
              viewMode: '3D',
              zoom: 11.8,
              center: [121.304018, 31.217688],
              mapStyle: 'amap://styles/bf648dad78e5b49b24f02d7d8e069bde',
              showBuildingBlock: false,
              showLabel: false,
            })
            // 巡航器函数
            this.initPathSimplifier()
            // 建立图层的容器和控制器
            this.locaIns = new Loca.Container({
                map: this.mapRoadIns,
            })
            // 环境光照参数
            this.locaIns.ambLight = {
                intensity: 2.2,
                color: '#babedc',
            };
            // 平行光照参数
            this.locaIns.dirLight = {
                intensity: 0.46,
                color: '#d4d4d4',
                target: [0, 0, 0],
                position: [0, -1, 1],
            };
            // 点光参数
            this.locaIns.pointLight = {
                color: 'rgb(15,19,40)',
                position: [121.5043258, 31.2392241, 2600],
                intensity: 25,
                // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                distance: 3900,
            };
            // 地理数据信息
            let geo = new Loca.GeoJSONSource({
                url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/sh_building_center.json',
            });
            // 光照图层实例
            this.polygonLayerIns = window.pl = new Loca.PolygonLayer({
                zIndex: 120,
                shininess: 10,
                hasSide: true,
                cullface: 'back',
                depth: true,
            });
            // 装填地理数据
            this.polygonLayerIns.setSource(geo);
            //  设置图层的样式
            this.polygonLayerIns.setStyle({
                topColor: '#111',
                height:  (index, feature) => {
                    return feature.properties.h;
                },
                textureSize: [1000, 820],
                texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/windows.jpg',
            });
            // 绑定控制器
            this.polygonLayerIns.setLoca(this.locaIns);
            // 监听地图加载完成事件
            this.mapRoadIns.on('complete', () => {
              this.locaIns &&  this.locaIns.animate.start();
              setTimeout(this.locaAnimateView, 3000)
             
            })
        }).catch(e => {
            console.log(e);
        })
        
      },
      initPathSimplifier() {
        AMapUI.load(['ui/misc/PathSimplifier'], (PathSimplifier) => {
          if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
          }
          let defaultRenderOptions = {
            pathLineStyle: {
              // strokeStyle: '#28F',
              lineWidth:6,
              dirArrowStyle: true
            },
            pathNavigatorStyle: {
              autoRotate:false,
              lineJoin:'round',
              // content:'defaultPathNavigtor',
              // fillStyle:'#28F',
              // strokeStyle:'#eee',
              lineWidth:6,
              // 走路的路径
              pathLinePassedStyle: {
                lineWidth:6,
                strokeStyle:'#AF5',
                borderWidth:0,
                borderStyle:'#eee',
                dirArrowStyle:true
              }
            },
            getPathStyle: function(pathItem,Zoom) {
              console.log('我是创建的巡航器实例 8888888888 getPathStyle 11111',pathItem,Zoom)
              return {
                pathLineStyle: {
                    strokeStyle: pathItem.pathIndex == 1 ? '#AF5' : '#28F',
                    lineWidth: 6
                },
                pathLineSelectedStyle: {
                    lineWidth: 6
                },
              }
            },
          }

          let pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            map: this.mapRoadIns, 
            getPath: (pathData, pathIndex) => {
              return pathData.path + pathIndex;
            },
            renderOptions: defaultRenderOptions
          })
          window.PathSimplifier = PathSimplifier
          window.pathSimplifierIns = pathSimplifierIns;
          setTimeout(() => {
            this.setGpsTrackList()
          }, 2000)
          
        })
      },
      setGpsTrackList() {
        console.log('我是巡器******', this.trackGpsList, this.navPathIns)
        this.pathSimpifiterData = [{
          name: '轨迹信息0',
          path: this.trackGpsList
        },{
        name: '轨迹信息1',
        path: []
      }]
        let len = this.trackGpsList.length - 1
        let startPot = this.trackGpsList[0]
        let endPot = this.trackGpsList[len]
        // 添加起始点
        this.stmarker = new AMap.Marker({
            map: this.mapRoadIns,
            position: [startPot[0], startPot[1]], //基点位置
            autoRotation: true,
            size: [38, 30],
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
            zIndex: 10
        });
        this.endmarker = new AMap.Marker({
            map: this.mapRoadIns,
            size: [38, 30],
            position: [endPot[0], endPot[1]], //基点位置
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
            zIndex: 10
        });
        // 装填数据
        pathSimplifierIns.setData([{
          name: '轨迹信息0',
          path: this.trackGpsList
        }]);
        this.navPathIns = pathSimplifierIns.createPathNavigator(0,{
          loop: false,
          speed: parseInt(this.animationSpeed),
          pathNavigatorStyle: {
            width:48,
            height:48,
            content: window.PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png'),
            strokeStyle:null,
            pathLinePassedStyle: {
              lineWidth:6,
              strokeStyle:'#AF5',
              borderWidth:0,
              borderStyle:'#eee',
              dirArrowStyle:true
            }
          }
        })
        console.log('88888888888888',  this.navPathIns, pathSimplifierIns)
        this.navPathIns.on('move', (e) => {
          if(this.zoomTimer) {
            return
          }
          this.zoomTimer = setTimeout(() => {
            const lastChild = this.navPathIns.getPosition() 
            // console.log('我是真实的缩放数据', realZoom, this.zoomNum, this.isMapZoomHandle, e)
            this.mapRoadIns.setZoomAndCenter(17,lastChild)
            this.mapRoadIns.setPitch(0, true);
            this.zoomTimer = undefined
          }, 1000)
        })
      },
      radioChange(type) {
        switch (type) {
          case 'startAnimation':
            this.startAnimation()
            break;
          case 'pauseAnimation':
            this.pauseAnimation()
            break;
          case 'resumeAnimation':
            this.resumeAnimation()
            break;
          case 'stopAnimation':
            this.stopAnimation()
            break;  
        
          default:
            break;
        }
      },
      startAnimation () {
        // 默认速度200km/h 演示可增加

      },
      pauseAnimation () {
      
      },
      resumeAnimation () {
        
      },
      stopAnimation () {
        
      },
      //动画函数
      locaAnimateView() {
        let speed = 1;
        // 镜头动画
        this.mapRoadIns.setZoom(11.8, true);
        this.mapRoadIns.setPitch(0, true);
        this.mapRoadIns.setCenter([121.304018, 31.217688], true);
        this.mapRoadIns.setRotation(1, true);
        this.polygonLayerIns.hide(1000);

        // 下钻
        this.locaIns.viewControl.addAnimates([{
              pitch: {
                value: 0,
                control: [[0, 20], [1, 0]],
                timing: [0, 0, 0.8, 1],
                duration: 3000 / speed,
              },
              zoom: {
                value: 15.9,
                control: [[0, 12.8], [1, 15.9]],
                timing: [0, 0, 0.8, 1],
                duration: 3000 / speed,
              },
              rotation: {
                value: -20,
                control: [[0, 20], [1, -20]],
                timing: [0, 0, 0.8, 1],
                duration: 2000 / speed,
              },
            }],  () => {
              setTimeout( () => {
                this.polygonLayerIns.show(2000);
              }, 3000);

              this.locaIns.viewControl.addAnimates([
                // 寻迹
                {
                  center: {
                    value: [121.500419, 31.238089],
                    control: [[121.424503326416,31.199146851153124], [121.46656036376952, 31.245828642661486]],
                    timing: [0.3, 0, 0.1, 1],
                    duration: 8000 / speed,
                  },
                  zoom: {
                    value: 17,
                    control: [[0.3, 15], [1, 17]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 4000 / speed,
                  },
                  pitch: {
                    value: 50,
                    control: [[0.3, 0], [1, 50]],
                    timing: [0.3, 0, 1, 1],
                    duration: 3000 / speed,
                  },
                  rotation: {
                    value: -80,
                    control: [[0, -20], [1, -80]],
                    timing: [0, 0, 1, 1],
                    duration: 1000 / speed,
                  },
                }, {
                  // 环绕
                  pitch: {
                    value: 50,
                    control: [[0, 40], [1, 50]],
                    timing: [0.3, 0, 1, 1],
                    duration: 7000 / speed,
                  },
                  rotation: {
                    value: 260,
                    control: [[0, -80], [1, 260]],
                    timing: [0, 0, 0.7, 1],
                    duration: 7000 / speed,
                  },
                  zoom: {
                    value: 17,
                    control: [[0.3, 16], [1, 17]],
                    timing: [0.3, 0, 0.9, 1],
                    duration: 5000 / speed,
                  },
                }, {
                  // 拉起
                  center: {
                    value: [121.500419, 31.238089],
                    control: [[121.49986267089844, 31.227628422210365], [121.49969100952148,31.24025152837923]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  pitch: {
                    value: 0,
                    control: [[0, 0], [1, 100]],
                    timing: [0.1, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  rotation: {
                    value: 361,
                    control: [[0, 260], [1, 361]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2000 / speed,
                  },
                  zoom: {
                    value: 13.8,
                    control: [[0, 17.5], [1, 13.8]],
                    timing: [0.3, 0, 0.7, 1],
                    duration: 2500 / speed,
                  },
                }],  () => {
                  this.polygonLayerIns.hide(1000);
                  setTimeout(this.locaAnimateView, 2000);
                  console.log('结束');
              });
          });
      }
    }
  }
</script>

<style scoped>
#mapLoca {
  height: 100%;
}
.gps-operater {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 9;
  color: aliceblue;
}
</style>